<template>
	<!-- 科室明细预算 -->
	<view>
		<!-- //遮罩层 -->
		<view @click="show=true" v-if="!show" class="propos">
		</view>
		<!-- 顶部搜索部分 -->
		<view class="seler">
			<!-- <u-search :clearabled='true' placeholder="流程名称、出事事由、时段" v-model="skeyword" :showAction='false'>
			</u-search> -->

			<view class="carry">
				<!-- 收起筛选 -->
				<view class="carry_y">
					<p style="color: #999999;">共5条</p>
				</view>

				<view style="color: #007aff;background-color:#eef6ff;" v-show="show" class='textblue'
					@click="show = !show">
					<p>筛选</p>
					<image style="width: 30rpx;" src="@/static/newimg/componens/down.svg" mode="widthFix">
					</image>
				</view>
				<!-- 收起筛选 -->
				<view v-show="!show" class='textblue' @click="show = !show">
					<p>筛选</p>
					<image style="width: 30rpx;" src="@/static/newimg/componens/uP.svg" mode="widthFix"></image>
				</view>
			</view>

			<!-- //筛选列表 -->
			<view v-if="!show" class="propo">
				<p><b>部门</b></p>
				<view class="bt_props">
					<view class="propscont">
						<view class="propscont" v-for="(item,index) in subEntityList" @click="clickbtn(item,index)">
							<span class='spans'>{{item.deptNm}}</span>
						</view>
					</view>
				</view>
				<p><b>科室</b></p>
				<view class="bt_props">
					<view class="propscont">
						<view class="propscont" v-for="(r,index) in rows" @click="clickbtntwo(r,index)">
							<span class='spansp'>{{r.deptNm}}22</span>
						</view>
					</view>
				</view>
				<view class="bottom_setup">
					<view class="bottom_white1">
						<u-button @click="show=!show" class="custom-styles" :plain="true" type="primary" text="取消">
						</u-button>
						<u-button @click="getdepList()" class="custom-style" type="primary" text="确认筛选"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view style="height:190rpx"></view>
		<!-- 表单部分 -->
		<view class="formcard" id="add_two">
			<view class="bodtitle">
				<p><b>{{deptNm}}</b></p>
			</view>
			<view v-for="(item,index) in rows" :key="index">
				<Expandlist :arrcell='item' :cellshows='cellshow' :celllist='celllist' :title='item.subdeptNm'>
					<template #text>
						<p class='solts'><label class="solts_label">￥</label><span class="solts_span"
								v-money>{{item.totalAmt}}</span></p>
					</template>
					<template #list>
						<!-- <view class="bod_cost" style="background-color: #f7fbff;border: 1px solid white;">
							<view class="bus">
								<p style='color: #666666'>审批状态</p>
							</view>
							<view>
								<p class='bodcolors' style='word-break:break-all ;color:rgb(80,218,46)'>审核通过</p>
							</view>
						</view> -->
					</template>
				</Expandlist>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				rows: [],
				show: true,
				skeyword: '',
				cellshow: false,
				celllist: [{
						tit: '预算号名称',
						val: 'budgetNm'
					},
					{
						tit: '预算号类型',
						val: 'budgetNo'
					},
					{
						tit: '一月预算',
						val: 'm01',
						type: 'number'
					},
					{
						tit: '二月预算',
						val: 'm02',
						type: 'number'
					},
					{
						tit: '三月预算',
						val: 'm03',
						type: 'number'
					},
					{
						tit: '四月预算',
						val: 'm04',
						type: 'number'
					},
					{
						tit: '五月预算',
						val: 'm05',
						type: 'number'
					},
					{
						tit: '六月预算',
						val: 'm06',
						type: 'number'
					},
					{
						tit: '七月预算',
						val: 'm07',
						type: 'number'
					},
					{
						tit: '八月预算',
						val: 'm08',
						type: 'number'
					},
					{
						tit: '九月预算',
						val: 'm09',
						type: 'number'
					},
					{
						tit: '十月预算',
						val: 'm10',
						type: 'number'
					},
					{
						tit: '十一月预算',
						val: 'm11',
						type: 'number'
					},
					{
						tit: '十二月预算',
						val: 'm12',
						type: 'number'

					},
				],
				preparation: [{ //筛选列表
						txt: '预算导入'
					},
					{
						txt: '供应商注册流程'
					},
					{
						txt: '出差申请单'
					},
					{
						txt: '一般申购单'
					},
				],
				rows: [],
				deptNm: '', //部门名称
				subdeptId: '', //科室
			}
		},
		onLoad(options) {
			this.options = JSON.parse(options.god)
			if (options != null) {
				let rows
				rows = JSON.parse(decodeURIComponent(options.god))
				this.subEntityList = rows.subEntityList
				// console.log('this.options传参的数据', this.subEntityList)
			}
		},
		created() {
			this.getlist(this.subEntityList[0].subdeptId)
		},
		mounted() {
			var that = this;
			window.myvm = that;
			window.$urlFormVue = that;
		},
		methods: {
			getlist(rows) {
				let _this = this
				let params = {
					subdeptId: rows,
				}
				_this.$lyRequest.post('/gateway/budget/mp/dbsap/budget/budgetImp/querySubDetaileById.do',
					params, 'form'
				).then((result) => {
					if (result.success) {
						// console.log(result.data)
						this.rows = result.data.rows
						this.deptNm = result.data.deptNm
					} else {
						console.log(result.data.msg)
					}
				})
			},
			getdepList() {
				this.getlist(this.subdeptId)
				this.show = !this.show
				// let _this = this
				// let params = {
				// 	deptNo:this.deptNo
				// }
				// _this.$lyRequest.post('/gateway/budget/mp/dbsap/budget/budgetImp/queryList.do',
				// 	params, 'form'
				// ).then((result) => {
				// 	if (result.success) {
				// 		console.log(1)
				// 	} else {
				// 		console.log(result.data.msg)
				// 	}
				// })
			},
			//审批和驳回-工作流点击"提交"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			rejectWorkflow(btnDef) {
				return "";
			},
			//作废-工作流点击"作废"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//content为作废意见
			invalidWorkflow(content) {
				return "";
			},
			//转办-工作流点击"确认转办"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//opinion:转办意见
			referredWorkflow(opinion) {
				return "";
			},
			//校验-工作流点击"提交"时触校验函数，返回:true校验通过，false校验不通过；
			//也可以返回具体的错误信息：空字符串，校验通过，返回具体错误信息校验不通过，同时弹出具体的错误信息。
			validateWorkflowForm(btnDef,callback) {
				callback("");
			},
			//提交单据
			sendWorkflow(btnDef, callback) {
				callback("");
			},
			//部门
			clickbtn(r, index) {
				let lists = document.getElementsByClassName('spans')
				for (let i = 0; i < lists.length; i++) {
					lists[i].style.color = 'black'
					lists[i].style.background = '#f9f9f9'
				}
				let colors = document.getElementsByClassName('spans')[index]
				colors.style.color = '#4289f9';
				colors.style.background = '#eff5fe'
				this.subdeptId = r.subdeptId
				console.log(this.subdeptId)
			},
			clickbtntwo(r, index) {
				let lists = document.getElementsByClassName('spansp')
				for (let i = 0; i < lists.length; i++) {
					lists[i].style.color = 'black'
					lists[i].style.background = '#f9f9f9'
				}
				let colors = document.getElementsByClassName('spansp')[index]
				colors.style.color = '#4289f9';
				colors.style.background = '#eff5fe'
				this.deptNm = r.deptNm
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		font-family: pf;
	}

	.seler {
		position: fixed;
		top: 0rpx;
		margin: 0rpx auto;
		width: 100%;
		background-color: white;
		z-index: 4;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		// padding-top: 20rpx;
	}

	.carry {
		display: flex;
		flex-direction: row;
		margin: 20rpx auto;
		height: 70rpx;
		width: 100%;
		justify-content: space-between;

		.carry_y {
			height: 70rpx;
			line-height: 70rpx;

			// width: 180rpx;
			p {
				color: #3E86F9;
				display: inline-block;
				vertical-align: top;
				font-size: 30rpx;
			}
		}
	}

	.textblue {
		width: 150rpx;
		height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		border-radius: 50px;
		background-color: rgb(247, 247, 247);
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			display: inline-block;
		}

		p {
			display: inline-block
		}

	}

	.bodcolor {
		span {
			color: #ff6400;
			font-size: 32rpx;
			padding-right: 20rpx;
		}

		label {
			color: #ff6400;
		}
	}

	.bodtitle {
		padding-left: 20rpx;
	}

	.propo {
		margin-bottom: 40rpx;
		position: fixed;
		top: 240rpx;
		left: 0;
		z-index: 5;
		width: 100%;
		height: auto;
		background-color: white;

		.props {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.bt_props {
			margin-top: 20rpx;
			background-color: white;
			height: auto;
			z-index: 3;

			.propscont {
				padding-left: 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: left;
				align-items: center;
				flex-wrap: wrap;

				span {
					display: inline-block;
					margin: 20rpx 20rpx;
					padding: 20rpx 50rpx;
					background-color: #f9f9f9;
					border-radius: 50px;
				}
			}

			p {
				padding-left: 50rpx;
			}

			.bt_pr {
				display: row;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 30rpx;
			}
		}

		p {
			padding-left: 50rpx;
		}

		.textblue {
			margin: auto 70rpx;
		}

		.preparation {
			height: 70rpx;
			padding: 5rpx 10rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 30rpx;
			border-radius: 50px;
			background-color: white;
			color: #999999;
			display: inline-block;
			margin: 10rpx;
		}
	}

	.propos {
		margin-top: 130rpx;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		background-color: black;
		opacity: .7;
		height: 700rpx;

	}

	.bottom_setup {
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 35rpx 0;
		box-sizing: border-box;
		box-shadow: 5px -10rpx 5px 0px rgba(225, 225, 225, .4), ;

		.bottom_white {
			width: 90%;
			margin: 0 auto;
		}

		.bottom_white1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;

			.custom-styles {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
			}

			.custom-style {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
				background-color: #007aff;
			}
		}
	}

	.bod_cost1 {
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: none;
		height: 100rpx;

		.bus {
			p {
				white-space: nowrap;
			}
		}

		p {
			display: inline-block;
			font-size: 30rpx;
			width: auto;
			// white-space:nowrap;
			word-break: break-all;
		}
	}
</style>
